EDITABLE HTML

Editable div via mouse click and keyboard event

Below are two divs with a border. Each div can be edited by clicking inside the divs area. The first div is implemented using the build-in browser/html feature contentEditable. The second div is implemented using Editable HTML of this project. Try it and experience the different behavior

This can be edited using a build-in html feature (for reference)

This can be edited using the Editable HTML of this project

Notice the different behavior of the two divs

(1) In EditableHTML you have to press 'Ctrl' key and click inside the div to make it editable. This shall avoid unintentional changes to edit mode.

(2) Editable HTML will set the divs innerHTML back to its original value, when click outside the div to avoid unintential changes. The buld-in feature will save your input and the original value gets lost.

(3) In this example, Editable HTML will only save your input when you press 'Ctrl + Enter' or 'Ctrl + Blankspace'. Each input must be confirmed by a dedicated user action, that makes it unlikey to happen by mistake.

HTML

I your html you need to add the class js-edit to the div you want to be editable. The class js-event is also needed as this element will get eventlisteners.

In your script section, you need to call the function editableHTML_Init() and pass the id of the node div container that has the editable divs. In this first example, there is only one editable div inside the node container.

Here's the example with three multiple editable divs inside the node container, containing the class js-edit and js-event

This is div 1

This is div 2

This is div 3

HTML

Multi Editable divs via mouse click and keyboard event

In this variant, the three text divs are connected. They form one logical edit unit, which are saved or discarded together. The editable divs need to be children of js-edit and have the class js-edit-child. Note that clicking outside the textare here will not undo your edit. Here we have to use the keyboard event 'esc' to discard the changes.

This is div 1

This is div 2

This is div 3

HTML

Editable div with buttons

In this example the user interface is based on buttons. Mouse clicks on the editable div and keyboard events are disabled here. The class js-event therefore has to move from the editiable div to the buttons. There a three buttons, edit, save and discard. The buttons can be located anywhere on the html as children of a div with class js-edit-btn. The link between the js-edit and js-edit-btn element is done via data-editable-link attribute which must be the same value.

To minimize html code, the buttons edit and save are by befault identified as the first and second child of the js-edit-btn element. When js-edit-btn has a third child, like in this exmaple, then the third child is identified as discard button. The discard button also can a separate element anywhere on the page. In yout html you have to set the class hidden to the save and discard button.

This is a div 1

HTML:

JS:

In this example the discard button is a seperate element. To link the discard button with its corresponding editable div, and button container the data data-editable-link with the same value must be added.

So either the class js-edit-btn has a third child, which is the discard button, or the data-value pair of data-editable-link occurs three times on the page (for a particular value), where only one has also the class js-event, which is the discard button.

This is a div 1

HTML:

JS:

05 discard button seperated with multiple divs

Same logic as above. You can have multiple editable divs can be placed inside a node container. The button actions applay to all divs inside the node

This is a div 1

This is a div 2

This is a div 3

HTML:

JS:

Example 6: table

....

{{svg-icon-edit-18}} {{svg-icon-save-18}} {{svg-icon-discard-12}}	some text	some other text	some other text	some other text
{{svg-icon-edit-18}} {{svg-icon-save-18}} {{svg-icon-discard-12}}	some text	some other text	some other text	some other text

HTML:

JS:

Example 7: table without events

....

{{svg-icon-edit-18}} {{svg-icon-save-18}} {{svg-icon-discard-12}}	some text	some other text	some other text	some other text
{{svg-icon-edit-18}} {{svg-icon-save-18}} {{svg-icon-discard-12}}	some text	some other text	some other text	some other text

HTML:

JS:

Overview

Here#s an voerview of all available classes and data-attributes you can use to configure Editable HTML

Classes:

js-edit: class to identify editable divs
js-edit-child: class to identify editable divs that are part of a multi-edit group
js-event: class to identify elements that get eventlisteners
js-edit-btn: class to identify button containers

Data-Attributes:

data-editable-link: data-attribute to link editable divs with button containers and discard buttons
data-edit-only-when-control-pressed: data-attribute to configure if ctrl key must be pressed to enter edit mode

Keyboard Events:

Ctrl + Click: enter edit mode (if configured)
Ctrl + Enter or Ctrl + Blankspace: save changes
Esc: discard changes

Supported Configurations:

Simple div: click inside div to edit, ctrl + enter/blankspace to save, esc to discard
- id="id-01"
Multiple divs: click inside any div to edit, ctrl + enter/blankspace to save, esc to discard
- id="id-02"
Multi-edit divs: click inside any div to edit, ctrl + enter/blankspace to save, esc to discard
- id="id-02b"
Div with buttons: click edit button to edit, save button to save, discard button to discard
- id="id-03"
Multiple divs with buttons: click edit button to edit, save button to save, discard button to discard
- id="id-05"
Special Case Multiple divs: table: click edit button to edit, save button to save, discard button to discard
- id="id-06"